<template>
  <div>
    <el-card>
      <header>
        <el-button type="primary">返回首页</el-button>
        <p>装备百度数据融合服务系统</p>
      </header>
      <!-- 搜索框 -->
      <!-- <div class="header-bottom">

    </div> -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            v-model="input"
            placeholder="请输入内容"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary">进入词条</el-button>
        </el-col>
      </el-row>

      <section class="section">
        <div class="sections">
          <!-- 左侧主要内容部分 -->
          <div class="left-wrapper">
            <div class="left-top">
              <p class="all">全部</p>
              <ul class="left-ul">
                <li>
                  <el-button
                    type="primary"
                    plain
                    round
                    size="mini"
                  >主题分类</el-button>
                </li>
                <li>
                  <el-button
                    type="primary"
                    plain
                    round
                    size="mini"
                  >业务纬度分类</el-button>

                </li>
                <li>
                  <el-button
                    type="primary"
                    plain
                    round
                    size="mini"
                  >对象纬度分类</el-button>
                </li>
              </ul>
            </div>

            <div class="left-top-one">

              <ul class="left-ul-one">
                <li
                  v-for="(item,index) in list"
                  :key="index"
                  @click="tab(index)"
                  :class="{active:index == num}"
                >
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                  >{{item}}</el-button>
                </li>
              </ul>
            </div>
            <!-- 下面图片 -->
            <div
              class="left-one-imgs"
              :class="num == index? 'current' : '' "
              :key="item.id"
              v-show="index == num"
              v-for="(item,index) in imageList"
            >

              <div
                class="img-box"
                v-for="(item2,indexs) in item.children"
                :key="indexs"
              >
                <img
                  class="demo-image"
                  :src="item2.src"
                />
                <p>{{item2.title}}</p>
              </div>

              <!-- <p
                v-for="(item2,index) in item.children"
                :key="index"
              > {{item2.title}}</p> -->
            </div>
            <div class="div">
              <ul class="ul-one">
                <li></li>
                <li></li>
                <li></li>
                <li></li>

              </ul>
            </div>
            <div class="ul-two">
              <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div class="box">
              <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
          </div>

          <!-- 左侧列表部分 -->
          <div class="left-wrappers">
            <div class="left-tops">
              <p class="all">全部</p>
              <ul class="left-uls">
                <li
                  v-for="(item,index) in list"
                  :key="index"
                  @click="tab(index)"
                  :class="num == index? 'active' : '' "
                >
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                  >{{item}}</el-button>
                </li>
              </ul>
            </div>
            <div class="left-bottom">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  type="selection"
                  width="60"
                >
                </el-table-column>

                <el-table-column
                  label="序号"
                  width="60"
                  type="index"
                >

                </el-table-column>
                <el-table-column
                  prop="name"
                  label="数据名称"
                  width=" 170"
                >
                </el-table-column>
                <el-table-column
                  prop="cate"
                  label="所属分类"
                  width=" 170"
                >
                </el-table-column>
                <el-table-column
                  prop="extent"
                  label="使用范围"
                  width=" 170"
                >
                </el-table-column>
                <el-table-column
                  label="创建时间"
                  width=" 170"
                >
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column label="操作">
                  <template>
                    <!--  slot-scope="scope" -->
                    <el-button
                      type="success"
                      size="mini"
                      @click="detail()"
                    >详情</el-button>
                    <!-- scope.row.index -->
                    <el-button
                      type="danger"
                      size="mini"
                      @click="del(index)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页组件 -->
              <Pagination
                class="el-paginations"
                v-bind:child-msg="pageparm"
                @callFather="callFather"
              ></Pagination>
            </div>
          </div>
        </div>
        <!-- 右侧推荐部分 -->
        <div class="right-wrapper">
          <div class="right-top">
            <div class="top-top">
              <div class="top-left">
                <img
                  :src="backImg"
                  class="imgs"
                >
                <span>热搜</span>
              </div>
              <div class="top-right">
                <!-- <img src="src\assets\imgs\热搜.png"> -->
                <span>换一换</span>
              </div>
            </div>
            <!-- 内容 -->
            <div class="top-middle">
              <span class="first-one">1</span>
              <span class="section-one">31省区市新增本土确诊13例</span>
              <span class="three">热</span>
              <span class="four">498万</span>
            </div>
            <div class="top-middle">
              <span class="first-section-one">2</span>
              <span class="section-one">31省区市新增本土确诊13例</span>
              <span class="three">热</span>
              <span class="four">498万</span>
            </div>
            <div class="top-middle">
              <span class="first-three">3</span>
              <span class="section-one">31省区市新增本土确诊13例</span>
              <!-- <span class="three">热</span>/ -->
              <span class="four">498万</span>
            </div>
            <div class="top-middle">
              <span class="first">4</span>
              <span class="section-one">没有确诊病例</span>
              <!-- <span class="three">热</span> -->
              <span class="four">498万</span>
            </div>
            <div class="top-middle">
              <span class="first">5</span>
              <span class="section-one">某省区市新增例子</span>
              <!-- <span class="three">热</span> -->
              <span class="four">498万</span>
            </div>
            <div class="top-middle">
              <span class="first">6</span>
              <span class="section-one">经过研究最终本土确诊125例</span>
              <span class="three">热</span>
              <span class="four">488万</span>
            </div>
            <div class="top-middle">
              <span class="first">7</span>
              <span class="section-one">经过研究最终本土确诊125例</span>
              <!-- <span class="three">热</span> -->
              <span class="four">462万</span>
            </div>
            <div class="top-middle">
              <span class="first">8</span>
              <span class="section-one">消防回应这次引火事件</span>
              <!-- <span class="three">热</span> -->
              <span class="four">450万</span>
            </div>
            <div class="top-middle">
              <span class="first">9</span>
              <span class="section-one">网易云真的回emo吗</span>
              <!-- <span class="three">热</span> -->
              <span class="four">418万</span>
            </div>
            <div class="top-middle">
              <span class="first">10</span>
              <span class="section-one">经过研究最终本土确诊125例</span>
              <span class="three-two">新</span>
              <span class="four">390万</span>
            </div>
            <!-- 最近更新 -->
            <div class="new">
              <p>最近更新</p>
              <div class="top-middle">
                <span class="first">1、</span>
                <span class="section-one">飞机</span>
                <span class="four-two">2021-05-05</span>
              </div>
              <div class="top-middle">
                <span class="first">2、</span>
                <span class="section-one">飞机23433</span>
                <span class="four-two">2021-05-05</span>
              </div>
              <div class="top-middle">
                <span class="first">3、</span>
                <span class="section-one">飞43机</span>
                <span class="four-two">2021-05-05</span>
              </div>
              <div class="top-middle">
                <span class="first">4、</span>
                <span class="section-one">111134飞机</span>
                <span class="four-two">2021-05-05</span>
              </div>
            </div>
          </div>
        </div>

      </section>
    </el-card>
  </div>
</template>

<script>
import backImg from "../../assets/img/20.png";
import Pagination from "../../components/Pagination";
export default {
  // 注册组件
  components: {
    Pagination
  },
  data() {
    return {
      input: "",
      // 按钮数组
      list: ["通用装备", "空军专用装备", "陆军专用装备", "海军专用装备"],
      // 内容数组
      imageList: [
        {
          id: 0,
          // title: "0",
          children: [
            {
              id: 0,
              title: "习近平讲述长征1",
              src: "static/img/5.jpg"
            },
            {
              id: 1,
              src: "static/img/6.jpg",
              title: "习近平讲述长征2"
            },
            {
              id: 2,
              src: "static/img/7.jpg",
              title: "习近平讲述长征3"
            },
            {
              id: 3,
              src: "static/img/8.jpg",
              title: "习近平讲述长征4"
            }
          ]
        },
        {
          id: 1,
          title: "1",

          children: [
            {
              id: 0,
              src: "static/img/9.png",
              title: "特种兵顶风练习1"
            },
            {
              id: 1,
              title: "特种兵顶风练习2",
              src: "static/img/10.jpg"
            },
            {
              id: 2,
              title: "特种兵顶风练习3",
              src: "static/img/11.jpg"
            },
            {
              id: 3,
              title: "特种兵顶风练习4",
              src: "static/img/12.png"
            }
          ]
        },
        {
          id: 2,
          title: "2",
          children: [
            {
              id: 0,
              title: "退伍不褪色1",
              src: "static/img/13.jpg"
            },
            {
              id: 1,
              title: "退伍不褪色2",
              src: "static/img/14.jpg"
            },
            {
              id: 2,
              title: "退伍不褪色3",
              src: "static/img/15.jpg"
            },
            {
              id: 3,
              title: "退伍不褪色4",
              src: "static/img/16.jpg"
            }
          ]
        },
        {
          id: 3,
          title: "3",
          children: [
            {
              id: 0,
              title: "毛泽东军事策略1",
              src: "static/img/17.jpg"
            },
            {
              id: 1,
              title: "毛泽东军事策略2",
              src: "static/img/18.jpg"
            },
            {
              id: 2,
              title: "毛泽东军事策略3",
              src: "static/img/8.jpg"
            },
            {
              id: 3,
              title: "毛泽东军事策略4",
              src: "static/img/13.jpg"
            }
          ]
        }
      ],
      // 点击的下标
      num: 0,
      backImg: backImg,
      tableData: [
        {
          date: "2016-05-03",
          cate: "Q管口径",
          name: "轻武器数据",
          extent: "设计",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          cate: "吨位",
          name: "重武器数据",
          extent: "设计",

          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          cate: "天军",
          name: "不轻不重武器数据",
          extent: "设计",

          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          cate: "海军",
          name: "非常重武器数据",
          extent: "设计",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          cate: "科技含量",
          name: "激光武器数据",
          extent: "设计",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          cate: "高科技",
          name: "电磁类武器数据",
          extent: "设计",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      multipleSelection: [],
      // 分页
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    };
  },
  methods: {
    // 点击切换tab栏
    tab(index) {
      this.num = index;
    },
    // 点击进入详情
    detail() {
      // 跳转路由
      this.$router.push("/system/Role");
    },
    // 删除
    del(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 调取接口进行删除

          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped>
li {
  list-style: none;
}
.all {
  width: 100px;
}
.imgs {
  width: 15px;
  height: 15px;
  /* // margin: 10px; */
  margin-top: 10px;
  margin-right: 4px;
  margin-left: 4px;
}
.section {
  display: flex;
}
.sections {
  width: 81%;
}
header .el-button {
  float: left;
  margin-top: -12px;
}
header p {
  font-size: 21px;
  margin-left: 450px;
  margin-top: -5px;
}
.el-col:nth-child(1) {
  margin-left: 290px;
  margin-top: 15px;
}
.el-col {
  margin-top: 15px;
}
.left-wrapper {
  height: 500px;
  border: 1px solid rgba(0, 0, 0, 0.527);
  border-radius: 8px;
  margin-top: 15px;
  position: relative;
}
.left-top {
  width: 400px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-left: 35px;
}
.left-ul {
  width: 320px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.left-ul li {
  font-size: 12px;
}
.left-wrappers {
  position: relative;
  height: 500px;
  border: 1px solid rgba(0, 0, 0, 0.527);
  border-radius: 8px;
  margin-top: 15px;
}
.left-tops {
  width: 500px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-left: 35px;
}
.left-uls {
  width: 1258px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-left: 35px;
}
.left-uls li {
  font-size: 12px;
}
.left-top-one {
  width: 500px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-left: 35px;
}
.left-ul-one {
  width: 420px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-left: 35px;
}
.left-ul-one li {
  font-size: 12px;
}
.left-ul-one li:active {
  background: #000;
}

.el-paginations {
  position: absolute;
  right: 20px;
  bottom: 15px;
}

.top-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.right-wrapper {
  flex: 1;
  /* border: 1px solid #000; */
}
.top-middle .first-section-one {
  margin-right: 3px;
  color: rgb(206, 63, 11);
}
.top-middle .first-one {
  color: red;
  margin-right: 4px;
}
.top-middle .first {
  margin-right: 4px;
  color: gray;
}
.top-middle .three {
  display: inline-block;
  background: orange;
  color: aliceblue;
  width: 13px;
  height: 13px;
  font-size: 11px;
  border-radius: 3px;
  text-align: center;
  line-height: 13px;
  margin-left: 4px;
  margin-top: 5px;
}
.top-middle .three-two {
  display: inline-block;
  background: red;
  color: aliceblue;
  width: 13px;
  height: 13px;
  font-size: 11px;
  border-radius: 3px;
  text-align: center;
  line-height: 13px;
  margin-left: 4px;
  margin-top: 5px;
}
.top-middle .first-section {
  margin-right: 4px;
  color: rgb(206, 63, 11);
}
.top-middle .first-three {
  margin-right: 4px;
  color: rgb(245, 161, 6);
}
.top-middle .four {
  color: lightgray;
  position: absolute;
  right: 10px;
}
.top-middle {
  position: relative;
  margin-left: 6px;
  line-height: 25px;
  font-size: 12px;
  display: flex;
}
.right-wrapper {
  font-size: 12px;
}
.right-wrapper .top-top {
  margin-top: 20px;
}
.right-wrapper .top-right {
  margin-right: 9px;
}
.new p {
  line-height: 20px;
}
.new .first {
  margin-right: 2px;
}
.new .four-two {
  margin-left: 50px;
}
.new {
  margin-left: 15px;
  margin-top: 35px;
  position: relative;
}
/* 九格方块 */

.box {
  width: 56px;
  position: absolute;
  right: 30px;
  top: 15px;
}
ul {
  overflow: hidden;
  margin-right: -20px;
  margin-bottom: -20px;
  margin-top: 0;
}
.box li {
  float: left;
  width: 8px;
  height: 8px;
  margin: 1px;
  background: #000;
}
.div {
  width: 33px;
  position: absolute;
  top: 16px;
  right: 100px;
}
.div .ul-one {
  /*   overflow: hidden;
  margin-right: -20px;
  margin-bottom: -20px;
  margin-top: 0; */
}
.div .ul-one li {
  float: left;
  width: 5px;
  height: 5px;
  margin: 1px;
  background: #000;
}
.ul-two {
  width: 53px;
  position: absolute;
  top: 15px;
  right: 74px;
}
.ul-two li {
  /* float: left; */
  width: 25px;
  height: 5px;
  margin: 2px;
  background: #000;
}
/* 切换的盒子 */
.tab-img {
  display: none;
}
.tab-img.current {
  display: block;
}
/* 下面图片 */
.left-one-imgs {
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
/* 图片 */
.left-one-imgs .demo-image {
  width: 100%;
  height: 150px;
}
.left-one-imgs .img-box {
  display: flex;
  flex-direction: column;
  width: 28%;
  margin-left: 25px;
  margin-right: 20px;
  margin-top: 21px;
  margin-bottom: 0;
}
.left-one-imgs p {
  line-height: 10px;
}
</style>
